<template>
    <div id="container">
        <div id="title">
            用户管理
        </div>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <el-table
            :data="userList.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%"
            >
            <el-table-column
                label="ID"
                prop="id"
                >
            </el-table-column>
            <el-table-column
                label="用户名"
                prop="username"
               >
            </el-table-column>
            <el-table-column
                label="用户权限"
                prop="role"
                width="400px">
                <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.role" @change="handleRoleChange($event,scope.row.id)">
                        <el-radio-button label="学生"></el-radio-button>
                        <el-radio-button label="教师"></el-radio-button>
                        <el-radio-button label="企业用户"></el-radio-button>
                        <el-radio-button label="库管理员"></el-radio-button>
                    </el-radio-group>
                </template>
            </el-table-column>
            <el-table-column
                align="right"
                >
                <template slot="header" slot-scope="scope">
                    <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入用户名搜索"
                    id="search-input"/>
                </template>
                <template slot-scope="scope">
                   <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="handleStatusChange($event,scope.row.id)">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'UserAdmin',
    data(){
        return{
            // 按用户名搜索
            search:'',
            // 用户列表
            userList:[
                {
                    'id':2017115182,
                    'username':'zijeak',
                    'role':'学生',
                    'status':true
                },
                {
                    'id':2017115183,
                    'username':'小青蛙',
                    'role':'教师',
                    'status':false
                }
            ],
        }
    },
    created:function(){
        this.getUsers();
    },
    methods:{
        getUsers:async function(){
            this.userList = [];
            const headerConfig = { headers:
                { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
            };
            try{
                const res = await axios.get('/api/admin/get_users',headerConfig);
                if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                if(res.data.res.ok === 1){
                    this.userList = res.data.res.data;
                }else{
                    this.$notify({
                        title: '提示',
                        message: res.data.res.msg,
                        type: 'error'
                    });
                }
            }catch(e){
                console.log(e);
                this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
            }
        },
        handleRoleChange:function(value,id){
            this.$confirm('此操作将变更该用户的权限, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
            }).then(async () => {
                let role = 0;
                switch(value){
                    case '学生':role = 0;break;
                    case '教师':role = 1;break;
                    case '企业用户':role = 2;break;
                    case '库管理员':role = 3;break;
                    case '系统管理员':role = 4;break;
                }
                let post_data = {
                    uid:id,
                    role:role
                }
                const headerConfig = { headers:
                    { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
                };
                try{
                    const res = await axios.post('/api/admin/change_role',post_data,headerConfig);
                    if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                    if(res.data.res.ok === 1){
                        this.$message({
                            type: 'success',
                            message: '您成功将ID为'+id+'的用户权限改为'+value
                        });
                    }else{
                        this.$notify({
                            title: '提示',
                            message: res.data.res.msg,
                            type: 'error'
                        });
                    }
                }catch(e){
                    console.log(e);
                    this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        },
        handleStatusChange:function(value,id){
            this.$confirm('此操作将变更该用户的状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
            }).then(async () => {
                let post_data = {
                    value:value,
                    uid:id
                }
                const headerConfig = { headers:
                    { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
                };
                try{
                    const res = await axios.post('/api/admin/change_status',post_data,headerConfig);
                    if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                    if(res.data.res.ok === 1){
                        this.$notify({
                            title: '提示',
                            message: res.data.res.msg,
                            type: 'success'
                        });
                    }else{
                        this.$notify({
                            title: '提示',
                            message: res.data.res.msg,
                            type: 'error'
                        });
                    }
                }catch(e){
                    console.log(e);
                    this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });          
            });
        },
    }
}
</script>

<style lang="scss" scoped>
#container{
    background-color: #fff;
    #title{
        font-size: 20px;
        font-weight: bold;
    }
}
/deep/ .el-input__inner{
    width:30%;
}
/deep/ #search-input{
    width:100%;
}
</style>